<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html style="height: 100%">
<head>
 <meta charset="utf-8">
 <jsp:include page="../include/headtag.jsp" />
 <link rel="stylesheet"
       href="${mybasePath}assets/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="${mybasePath}assets/css/form-elements.css">
 <link rel="stylesheet" href="${mybasePath}assets/css/style.css">
</head>
<body style="height: 80%; width: 80%; margin-left:auto">
<jsp:include page="../include/head1.jsp" />
<jsp:include page="../include/menu1.jsp" />
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="${mybasePath}assets/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${mybasePath}assets/echart/echarts.min.js"></script>
<script type="text/javascript">
 var dom = document.getElementById("container");
 var myChart = echarts.init(dom);

 option = {
  color: ['#1890ff', '#1f9'],
  grid: {
   top: '25%',
   right: '5%',
   left: '5%',
   bottom: '10%',
  },
  legend: {
   top: 5,
   left: 250,
   itemWidth: 10,
   itemHeight: 10,
   textStyle: {
    fontSize: 14,
    color: 'red',
    padding: [3, 8, 0, 2],
   },
   data: ['增长率', '数值'],
  },

  xAxis: [
   {
    type: 'category',
    data: [<c:forEach var="item" items="${test}">
            "${item}",
     </c:forEach> ],
    axisLine: {
     show: false,
    },

    axisTick: {
     show: false,
    },
    splitLine: {
     show: false,
    },
    axisLabel: {
     color: 'red',
     interval: 0,
     textStyle: {
      fontSize: 10,
     },
     fontFamily: 'LCDEF',
    },
   },
  ],
  yAxis: [
   {
    name: '单位：家',
    axisLine: {
     show: false,
     lineStyle: {
      color: '#ccc',
     },
    },
    type: 'value',
    axisTick: {
     show: false,
    },
    splitLine: {
     show: true,
     lineStyle: {
      color: '#384267',
     },
    },
    axisLabel: {
     color: '#cccccc',
     fontSize: '10',
    },
   },
   {
    type: 'value',
    name: '合格率 (%)',
    position: 'right',
    axisLabel: {
     formatter: '{value} %',
     color: '#27719F',
    },
    max: 100,
    splitLine: {
     show: false,
    },
    axisPointer: {
     show: true,
    },
    axisTick: {
     show: false,
    },
    axisLine: {
     show: true,
     lineStyle: {
      color: '#27719F',
     },
    },
   },
  ],
  series: [
   {
    type: 'bar',
    name: '数值',
    barWidth: '20',
    data: [<c:forEach var="item" items="${test1}">
     ${item},
     </c:forEach> ],
    itemStyle: {
     normal: {
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
       {
        offset: 0,
        color: '#42B7FD',
       },
       {
        offset: 1,
        color: '#3299FF',
       },
      ]),
     },
    },
   },

  ],
 };

 if (option && typeof option === "object") {
  myChart.setOption(option, true);
 }

</script>
</body>
</html>